<template>
  <div class="container">
    <div class="card">
      <div class="but-container">
        <button type="button" class="btn1">全部 </button>
        <button type="button" class="btn2">建议</button>
        <button type="button" class="btn3">账号</button>
        <button type="button" class="btn4">问题</button>
        <button type="button" class="btn5">举报</button>
        <button type="button" class="btn6">公告</button>
      </div>

      <!--列表开始 -->
      <ul class="ulList">
        <li class="liList"  v-for="(item, index) in tableData" :key="index">
          <span class="ts-cardname">
            <span class="ts-cardicon"></span>
            <p>{{tableData.author}}</p>
            <em>5/23 16:15</em>
          </span>
          <i class="tag-ts">建议</i> 
          <div class="ts-card-foot">
                  <p prop="text">{{tableData.text}}</p>
                  <span class="ts-cardfoot-icon">
                      <b class="ts-cardicon1"></b>
                      <i>22</i>
                      <b class="ts-cardicon1"></b>
                      <i>22</i>
                  </span>
              </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import api from '../../api'
export default {
  data(){
    return{
      tableData:{
        author:"",
        text:""
      }
    }
  },
  mounted(){
   api.getCommunity().then(res=>{
            console.log(res.data.list)
            this.tableData = res.data.list
            for(var i=0;i<res.data.list.length;i++){
              this.tableData.author = res.data.list[i].author
              this.tableData.text = res.data.list[i].text
            }
            
          })
  }
}
</script>

<style>
.container{
    width: 100%;
    margin: 0 auto;
    background-color: #F5F5F5;
    margin-top: 0px;
    position: relative;
    text-align: center;
}
.card{
    border-radius: 15px;
    width: 815px;
    height:100%;
    margin: 0 10px;
    background-color: #fff;
    margin-bottom: 15px;
    display: inline-block;
    font-size: 0;
    vertical-align: top;
    cursor: pointer;
    text-align: left;
}
.but-container{
  width:100%;
  height:145px;
  background: #fff;
  border-bottom: 1px solid #E6E6E6;
}
.but-container button{
  width:91px;
  color:#fff;
  height:38px;
  border-radius: 5px;
}
.but-container .btn1{
  color:#fff;
  margin: 50px 0 0 65px;
  background-color: #FFD372;
}
.but-container .btn2{
  color:#fff;
  margin-left:25px;
  background-color: #FF8D56;
}
.but-container .btn3{
  color:#fff;
   margin-left:25px;
  background-color: #EB4C6A;
}
.but-container .btn4{
  color:#fff;
  margin-left:25px;
  background-color: #A748AE;
}
.but-container .btn5{
  color:#fff;
   margin-left:25px;
  background-color: #0091EA;
}
.but-container .btn6{
  color:#fff;
   margin-left:25px;
  background-color: #47D4E6;
}
.liList{
  width:100%;
  height:190px;
  background: #fff;
  border-bottom: 1px solid #E6E6E6;
}
.ts-cardicon{
    border-radius: 50%;
    display: inline-block;
    width: 50px;
    height: 50px;
    background: url(../../images/touxiang.png) center no-repeat;
    padding: 10px;
    padding-top: 18px;
    margin-top:10px;
    margin-left:10px;
}
.ts-container{
    height:655px;
    width: 100%;
    margin: 0 auto;
    padding:20px;
    background-color: #F5F5F5;
    margin-top: 0px;
    position: relative;
    text-align: center;
}
.ts-container .ts-card{
    border-radius: 15px;
    width: 280px;
    margin: 0 10px;
    background-color: #fff;
    margin-bottom: 15px;
    display: inline-block;
    font-size: 0;
    vertical-align: top;
    cursor: pointer;
    text-align: left;
}
.ts-card .ts-card-head{
    height: 80px;
    width: 100%;
    text-align: left;
}
.ts-cardicon{
    display: inline-block;
    width: 40px;
    height: 40px;
    background: url(../../images/touxiang.png) center no-repeat;
    padding: 10px;
    padding-top: 18px;
}
.ts-cardname{
    margin-top: 12px;
    display: inline-block;
    width: 164px;
    text-align: left;
    vertical-align: top;
}
.ts-cardname p{
    font-weight: normal;
    font-size: 16px;
    color: #33A7EE;
    display: block;
    margin-top: -50px;
    margin-left:70px;
}
.ts-cardname em{
  margin-left:70px;
  margin-top: 20px;
    font-size: 12px;
    color:#999
}
.liList{
  position:relative
}
.tag-ts{
   display: inline-block;
    font-size: 14px;
    width: 48px;
    height: 20px;
    border-radius: 10px;
    line-height: 20px;
    text-align: center;
    vertical-align: top;
    margin-top: 15px;
    position: absolute;
    top:20px;
    right:25px;
    color: #FFC2A4;
    border: 1px solid #FFC2A4;
}
.ts-card img{
    width:100%;
}
.ts-card-foot{
    margin-top: 10px;
    margin-left: 50px;
    height: auto;
    width: 100%;
}
.ts-card-foot p{
    padding-top: 0px;
    font-size: 14px;
    padding-left: 10px;
    color: #4c4c4c;
}
.ts-cardfoot-icon{
    float:right;
    margin-right:60px;
    display: block;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    color: #cccccc;
}
.ts-cardicon1{
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url(../../images/spriteicon.png) 0 -73px no-repeat;
    cursor: pointer;
}
.ts-cardfoot-icon i{
    padding: 5px;
    color: #ccc;
}
.ts-cardicon2{
    display: inline-block;
    width: 20px;
    height: 14px;
    background: url(../../images/spriteicon.png) 0 -150px no-repeat;
    cursor: pointer;
}
</style>